<template>
	<view class="company-detail-container">
		<scroll-view
			class="scroll-view"
			scroll-y
			:show-scrollbar="false"
			enhanced
			scroll-with-animation
			enable-passive
			fast-deceleration
			:bounces="false"
			refresher-enabled
			enable-flex
			:refresher-triggered="isPullRefresh"
			@refresherrefresh="refreshList"
			@scrolltolower="getPersonList"
		>
			<view class="company-detail-info">
				<image :src="companyDetailBg" class="company-detail-bg"></image>
				<view class="company-info">
					<image :src="companyIcon" class="icon" v-if="currentCompanyInfo.type == 1"></image>
					<view class="project-name">{{ currentCompanyInfo.name }}</view>
				</view>
				<view class="company-attendance-info">
					<view class="company-attendance-item-list">
						<view class="company-attendance-item">
							<view class="num">{{ currentCompanyInfo.attendanceCount }}</view>
							<view class="des">出勤人数</view>
						</view>
						<view class="company-attendance-item">
							<view class="num">{{ currentCompanyInfo.count }}</view>
							<view class="des">在岗人数</view>
						</view>
						<view class="company-attendance-item">
							<view class="num">{{ currentCompanyInfo.stayingCount }}</view>
							<view class="des">实时在场</view>
						</view>
					</view>
					<view class="company-attendance-rate-container">
						<l-circle strokeColor="#0071F7" trailColor="#D8DCE6" :current.sync="percent" :percent="handleCompute(currentCompanyInfo.attendanceRate)" canvas size="70">
							<view class="company-rate-container">
								<view class="rate-num">{{ handleCompute(currentCompanyInfo.attendanceRate) }}%</view>
								<view class="rate-des">出勤率</view>
							</view>
						</l-circle>
					</view>
				</view>
			</view>

			<view class="detail-company-list" v-if="currentCompanyInfo.children && currentCompanyInfo.children.length != 0">
				<Company :companyList="currentCompanyInfo.children"></Company>
			</view>
			<view class="company-detail-person-list" :class="currentCompanyInfo.children && currentCompanyInfo.children.length != 0 ? '' : 'no-company'">
				<view class="company-detail-person-item" v-for="(item, index) in personList" :key="item.uuid" @tap="toPersonnelAttendanceRecord(item)">
					<image :src="imgShow(item.avatar)" class="company-detail-person-avatar"></image>
					<view class="company-detail-person-info">
						<view class="company-detail-info-top">
							<text class="company-detail-info-person-name">{{ item.name }}</text>
							<text>{{ item.age }}岁</text>
						</view>
						<view class="company-detail-info-bottom">
							<view class="work-type-tag">{{ item.worktypeOrStationName }}</view>
						</view>
					</view>
					<view class="company-detail-person-attendance-info">
						<view class="company-detail-person-attendance-state">{{ item.hasAttendanceRecord ? '今日出勤' : '未出勤' }}</view>
						<view class="company-detail-person-attendance-time">{{ item.workTimeLength }}</view>
					</view>
				</view>
			</view>
			<view class="gray"></view>
		</scroll-view>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
import Company from '@/pagesA/pages/projectSurvey/Company.vue';
const app = getApp();
export default {
	components: {
		Company
	},
	data() {
		return {
			companyIcon: common.imgs.companyIcon,
			phoneIcon: common.imgs.phoneIcon,
			projectIcon: common.imgs.projectIcon,
			companyDetailBg: common.imgs.companyDetailBg,
			percent: 0,
			organizationUuid: '',
			projectUuid: '',
			personList: [],
			currentCompanyInfo: {},
			isPullRefresh: false,
			pageNum: 1,
			pageSize: 20,
			noMore: false
		};
	},
	onLoad(options) {
		this.projectUuid = !options.projectUuid || options.projectUuid == 'undefined' || options.projectUuid == 'null' ? '' : options.projectUuid;
		this.organizationUuid = options.organizationUuid;
		this.refreshList();
	},
	methods: {
		imgShow(url) {
			return common.commonMethods.imgShow(url);
		},
		handleCompute(value) {
			return value ? Number(Number(value * 100).toFixed(1)) : 0;
		},
		getOrganizationDetail() {
			let params = {
				projectUuid: this.projectUuid,
				organizationUuid: this.organizationUuid
			};
			!params.projectUuid && delete params.projectUuid;
			common.apis.projectSurvey.getOrganizationDetail(params).then((res) => {
				let currentCompanyInfo = res.data;
				if (currentCompanyInfo.children && currentCompanyInfo.children.length != 0) {
					for (let item of currentCompanyInfo.children) {
						//这个接口定义的type和前面的表现不一样，进行了一个转换
						item.type = item.type == 1 ? 2 : item.type;
					}
				}

				this.currentCompanyInfo = currentCompanyInfo;
			});
		},
		toCompanyDetail(item) {
			uni.navigateTo({
				url: '/pagesA/pages/projectSurvey/companyDetail'
			});
		},
		refreshList() {
			this.pageNum = 1;
			this.noMore = false;
			this.isPullRefresh = true;
			this.personList = [];
			this.getOrganizationDetail();
			this.getPersonList();
		},
		getPersonList() {
			if (this.noMore) {
				return;
			}
			let params = {
				organizationUuid: this.organizationUuid,
				projectUuid: this.projectUuid,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			if (!params.projectUuid) {
				delete params.projectUuid;
			}
			common.apis.projectSurvey.rosterListPageByOrganization(params).then(
				(res) => {
					let personList = res.data;
					this.personList = this.personList.concat(personList);
					this.pageNum = this.pageNum += 1;
					this.isPullRefresh = false;
					this.noMore = personList.length < this.pageSize;
				},
				(err) => {
					this.isPullRefresh = false;
					this.noMore = false;
				}
			);
		},
		toPersonnelAttendanceRecord(item) {
			uni.navigateTo({
				url: `/pagesA/pages/personnelAttendanceRecord/personnelAttendanceRecord?projectUuid=${item.projectUuid}&rosterUuid=${item.uuid}`
			});
		}
	}
};
</script>

<style>
.company-detail-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f6f7fa;
}
.scroll-view {
	height: 0;
	flex: 1;
}
.company-detail-info {
	width: 100%;
	position: relative;
	z-index: 0;
	padding: 32rpx 24rpx 105rpx;
	box-sizing: border-box;
}
.company-detail-info .company-detail-bg {
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.company-info {
	display: flex;
	align-items: center;
}
.company-info .icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 16rpx;
}
.company-info .project-name {
	flex: 1;
	word-break: break-all;
	text-align: justify;
}
.company-attendance-info {
	width: 702rpx;
	box-sizing: border-box;
	background-color: #fff;
	height: 162rpx;
	background: #ffffff;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	bottom: -81rpx;
}
.company-attendance-item-list {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.company-attendance-item-list .company-attendance-item {
	width: calc(100% / 3);
	text-align: center;
	color: #1e253f;
}
.company-attendance-item .num {
	font-size: 36rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	word-break: break-all;
}
.company-attendance-item .des {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}
.company-attendance-rate-container {
	margin-left: 40rpx;
	margin-right: 32rpx;
	text-align: center;
}
.company-rate-container .rate-num {
	font-size: 28rpx;
	font-family: Roboto-Bold, Roboto;
	font-weight: bold;
	color: #1e253f;
}
.company-rate-container .rate-des {
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
}
.detail-company-list {
	margin-top: 105rpx;
}
.company-detail-person-list {
	margin: 0 24rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 0 32rpx;
}
.no-company {
	margin-top: 105rpx;
}
.gray {
	height: 24rpx;
	background-color: transparent;
}
.company-detail-person-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #e8e9eb;
}
.company-detail-person-item:last-child {
	border-bottom: 0;
}
.company-detail-person-avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 8rpx;
	border: 1rpx solid #e8e9eb;
	margin-right: 16rpx;
	flex-shrink: 0;
}
.company-detail-person-info {
	min-height: 90rpx;
}
.company-detail-person-info .company-detail-info-top {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1e253f;
}
.company-detail-info-top .company-detail-info-person-name {
	word-break: break-all;
	margin-right: 16rpx;
}
.company-detail-info-bottom {
	display: flex;
	flex-wrap: wrap;
}
.company-detail-info-bottom .work-type-tag {
	background: #eff1f6;
	border-radius: 6rpx;
	padding: 4rpx 16rpx;
	margin-right: 16rpx;
	margin-top: 20rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	word-break: break-all;
	text-align: center;
	width: fit-content;
}
.company-detail-info-bottom .work-type-tag:nth-child(even) {
	margin-right: 0;
}
.company-detail-person-attendance-info {
	margin-left: auto;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	text-align: center;
	flex-shrink: 0;
}
.company-detail-person-attendance-info .company-detail-person-attendance-state {
	color: #949dbf;
	margin-bottom: 20rpx;
}
.company-detail-person-attendance-info .company-detail-person-attendance-time {
	width: 112rpx;
	height: 40rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	color: #4b5680;
}
</style>
